<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm"
      @submit.native.prevent="getKioskFace">
      <!-- 搜索框-->
      <el-form-item prop="createDate">
        <el-date-picker v-model="searchForm.createDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-right: 10px;" placeholder="请选择设备" label="驻足设备" prop="kioskIdList"
        <el-cascader
          ref="kioskSelect"
          collapse-tags
          :options="options"
          :props="{ multiple: true ,emitPath: false}"
          v-model="searchForm.kioskIdList"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item style="margin-left: 10px;">
        <el-button type="primary" @click="getKioskFace()" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <ve-line :data="chartData" :settings="chartSettings"></ve-line>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      this.chartSettings = {
        xAxisType: 'time'
      }
      return {
        searchForm: {
          createDate: [],
          kioskIdList: []
        },
        options: [],
        chartData: {
          columns: ['日期', '访问次数','平均时长(秒)','访问次数(待机)','平均时长(待机)','男性','女性','0～14岁','15～35岁','36~60岁','60岁以上'],
          rows: []
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(7, 'days'), end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(1,'months'), end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(3,'months'), end]);
            }
          }, {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(6,'months'), end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(12,'months'), end]);
            }
          }]
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        dataListSelections: [],
        isSearchCollapse: false,
        isImportCollapse: false,
        loading: false
      }
    },
    mounted() {
      this.$http({
        url: `/smis/floor/jfFloor/kioskJson`,
        method: 'get'
      }).then(({data}) => {
        this.options = data
        this.loading = false
      })
    },
    activated() {
      var now = (new Date())
      this.searchForm.createDate = [moment(now).subtract(1,'months'), now]
      this.getKioskFace()
    },
    methods: {
      getKioskFace() {
        this.$http({
          url: '/smis/tongji/jfKioskTongji/getKioskFace',
          method: 'post',
          params: {
            'kioskIds': this.searchForm.kioskIdList.join(','),
            'startTime': moment(this.searchForm.createDate[0]).format("YYYY-MM-DD")+' 00:00:00',
            'endTime': moment(this.searchForm.createDate[1]).format("YYYY-MM-DD")+' 23:59:59'
          }
        }).then(({ data }) => {
          if (data && data.success) {
            var list = data.list || []
            this.chartData.rows = []
            list.forEach((item)=>{
              this.chartData.rows.push({
                '日期': item.createTime, '访问次数': item.count, '平均时长(秒)': (item.count === 0 ? '0' : Math.ceil(item.totalTime/item.count)),'访问次数(待机)':item.standbyCount,'平均时长(待机)':(item.standbyCount === 0 ? '0' : Math.ceil(item.standbyTime/item.standbyCount)),'男性':item.male,'女性':item.female,'0～14岁':item.child,'15～35岁':item.youth,'36~60岁':item.middleAge,'60岁以上':item.oldAge
              })
            })
          }
        })
      },
      // 获取数据列表
      refreshList() {
        this.loading = true
        this.$http({
          url: '/smis/tongji/jfKioskTongjiClick/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            // ...this.searchForm
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageNo = 1
        this.refreshList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageNo = val
        this.refreshList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },

      // 排序
      sortChangeHandle(obj) {
        if (obj.order === 'ascending') {
          this.orderBy = obj.prop + ' asc'
        } else if (obj.order === 'descending') {
          this.orderBy = obj.prop + ' desc'
        } else {
          this.orderBy = ''
        }
        this.refreshList()
      },
      // 导入成功
      uploadSuccess(res, file) {
        if (res.success) {
          this.$message.success({
            dangerouslyUseHTMLString: true,
            message: res.msg
          })
        } else {
          this.$message.error(res.msg)
        }
      },
      // 下载模板
      downloadTpl() {
        this.$utils.download('/smis/tongji/jfKioskTongjiClick/import/template')
      },
      exportExcel() {
        this.$utils.download('/smis/tongji/jfKioskTongjiClick/export')
      },
      resetSearch() {
        this.$refs.searchForm.resetFields()
        this.refreshList()
      }
    }
  }
</script>
